<template>
  <div>
    <a-form  ref="pushForm" v-bind="formItemLayout">
      <a-form-item :wrapper-col="{ span: 15, offset: 2 }" >
        <template v-for="(item,index) in options">
          <div style="padding-top:10px">
            <a-select style="width: 80px;" name="serviceName" v-model:value="item.serviceName">
              <a-select-option value="PUSH_JG">极光</a-select-option>
            </a-select>
            <a-input placeholder="名称" style="width: 10%;margin-left: 5px" v-model:value="item.keyName"></a-input>
            <a-input placeholder="appKey" style="width: 30%;margin-left: 5px" v-model:value="item.appKey"></a-input>
            <a-input placeholder="secretKey" style="width: 35%;margin-left: 5px" v-model:value="item.secretKey"></a-input>
            <a-switch defaultChecked checkedChildren="正式" unCheckedChildren="开发" v-model:checked="item.ambient" style="margin-left: 5px"/>
            <delete-outlined @click="() => remove(index)" v-if="index>0" style="margin-left: 5px;color: #666666"/>
            <br>
          </div>
        </template>
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 8, offset: 2 }">
        <a-button type="dashed" style="width: 50%" @click="add">
          <a-icon type="plus"/>
          添加推送配置
        </a-button>
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 8, offset: 2 }">
        <a-button type="primary" @click="handleSubmit">保存配置</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script lang="ts" name="Tab2" setup>
import {onMounted, ref} from 'vue';
import {getConfig, savePush} from '../data/config.api';
import {DeleteOutlined} from '@ant-design/icons-vue';

const options = ref([{serviceName:'',keyName: '33333', appKey: '', secretKey: '', ambient: true}]);
const formItemLayout = {
  labelCol: {span: 2},
  wrapperCol: {span: 10},
};
const formState = ref({
  enable: false,
  accessKey: '',
  secretKey: '',
  smsTplCode: '',
  signName: '',
  encryption: false,
  smsCodeHander: '',
});

onMounted(() => {
  setData()
});

function remove(index) {
  options.value.splice(index, 1)
}

function add() {
  options.value.push({serviceName:'',keyName: '', appKey: '', secretKey: '', ambient: true})
}

/**
 * 表单初始化
 * @param data
 */
function setData() {
  getConfig({
    configType: 'push'
  }).then((data) => {
    options.value = JSON.parse(data.PUSH_CONFIG)
  })
}

/**
 * 表单提交
 */
async function handleSubmit() {
  savePush({
    pushConfig:JSON.stringify(options.value)
  }).then(() => {

  })
}

</script>
